<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
    <link rel="stylesheet" type="text/css" href="css/index.css" />

    <title>Epic Journey</title>

    <style>
        .map-canvas,#map {
          height: 550px;
          width: 300px;
          margin: 0px;
          padding: 0px;
      }
  </style>

  <script type="text/javascript" src="lib/jquery-1.11.2.js"></script>
  <script type="text/javascript" src="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script type="text/javascript" src="cordova.js"></script>  
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script type="text/javascript" src="js/accueil-map.js"></script>
  <script type="text/javascript" src="js/index2.js"></script>
  <script type="text/javascript" src="js/nfc.js"></script>
</head>
<body data-role="page" data-theme="a">

    <!-- Menu -->
    <div data-role="panel" id="menu" data-position="left" data-display="push">
        <div class="profil_infos">
            <img class="image_profil" src="img/kitten.png"/>
            <p class="pseudo"></p>
            <p class="souvenirs">
                <span></span>
                <i class="fa fa-cloud"></i>
            </p>
        </div>
        <ul>
            <li class="selection">
                <button id="lnkAccueil" type="submit"><i class="fa fa-home"></i> Accueil</button>
            </li>
            <li>
                <button id="lnkRecherche" type="submit"><i class="fa fa-search" ></i> Rechercher une expédition</button>
            </li>
            <li>
                <button id="lnkProfil" type="submit"><i class="fa fa-user" ></i> Profil</button>
            </li>
            <li>
                <button id="lnkReward" type="submit"><i class="fa fa-shopping-cart" ></i> Récompenses</button>
            </li>
        </ul>
    </div>

    <!-- Header -->
    <div id="headerbandeau" data-role="header" data-position="fixed">
        <a id="menubutton" href="#menu" data-role="none">
            <i class="fa fa-bars fa-2x"></i>
        </a>
        <h1 class="title">Accueil</h1>
    </div>

    <div data-role="content">

        <img id="image_validation" src="img/validation3.png" hidden/>

		<div data-role="popup" id="funFactPop">
			<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
            <h2></h2>
            <h4></h4>         
			<p></p>
		</div>
        <!--*********************ACCUEIL**************************-->
        <div class="ui-content" id="Accueil">
            <div id="current">
			<p center>Expéditions en cours:</p>
                <ul class="expes">
                    <!-- Données dynamiquement chargées -->
                </ul>
            </div>

			<p center> Découvrez aussi:</p>
            <div id="search">
                <ul class="expes">
                    <!-- Données dynamiquement chargées -->
                </ul>
            </div>
        </div>

<!--*********************RECHERCHE**************************-->
    <div data-role="content" class="ui-content" id="Recherche">
        <div class="searchArea">
            <input id="txtCity" type="text" name="city" value="ville ou code postal" data-inline="true" onblur="if (this.value == '') {this.value = 'ville ou code postal';}"
 onfocus="if (this.value == 'ville ou code postal') {this.value = '';}" maxlength="10">
            <a data-role="button" data-icon="info" id="search" data-inline="true" data-iconpos="notext">Search</a>
            </div>

            <div class="listExpe" id="searchAll">
                <h3>Expédition(s) disponible(s):</h3>
            </div>
        </div>

        <!--*********************PROFIL**************************-->
        <div class="ui_content" id="Profil">
            <h2>Expéditions accomplies</h2>
            <div class="historique" id="history"></div>  
            <h2> Récompenses acquises</h2>
            <div class="rewards" id="reward"></div>
        </div>

        <!--********************REWARD SHOP****************-->
        <div class="ui_content" id="RewardShop">
            <h2>Récompenses disponibles</h2>
            <div class="available" id="available"></div>
        </div>
    </div>
</body>
</html>
